<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>栅格系统</title>
        <link rel="stylesheet" type="text/css" href="../src/reset.source.css" />
        <link rel="stylesheet" type="text/css" href="../src/grid.source.css" />
        <style type="text/css">
            .container {
                margin-bottom: 10px;
            }

            .body {
                background: url(../images/grid.png);
            }

            .container div {
                background: #95071B;
                filter: Alpha(opacity=75);   
                opacity:.75;   
                text-align: center;
                height: 50px;
                line-height: 50px;
            }

            .sample div {
                text-align: left;
                background: none;
                height: auto;
                line-height: 200%;
            }
        </style>
    </head>
    <body>
        <div class="body body-950">
            <div class="container sample">
                <div class="column-23 start-02">
                    <h3>栅格系统对照表</h3>
                    <p>最后更新：$Id: grid.html 51 2008-09-24 14:14:26Z i.feelinglucky $</p>
                    <p><img src="../reference/formula.png" alt="formula.png" /></p>
                </div>
            </div>


            <div class="container sample">
                <div class="column-23 start-02">
                    <h4>常见栅格排版</h4>
                </div>
            </div>

            <div class="container sample">
                <div class="column-23 start-02">
                    <h4>通栏</h4>
                </div>
            </div>

            <div class="container">
                <div class="column-24 start-01">950px</div>
            </div>

            <div class="container sample">
                <div class="column-23 start-02">
                    <h4>二分栏</h4>
                </div>
            </div>

            <div class="container">
                <div class="column-05 start-01">190px</div>
                <div class="column-19 start-06">750px</div>
            </div>

            <div class="container">
                <div class="column-06 start-01">230px</div>
                <div class="column-18 start-07">710px</div>
            </div>

            <div class="container">
                <div class="column-07 start-01">270px</div>
                <div class="column-17 start-08">670px</div>
            </div>

            <div class="container">
                <div class="column-09 start-01">350px</div>
                <div class="column-15 start-10">590px</div>
            </div>

            <div class="container sample">
                <div class="column-23 start-02">
                    <h4>三分栏</h4>
                </div>
            </div>

            <div class="container">
                <div class="column-05 start-01">190px</div>
                <div class="column-12 start-06">470px</div>
                <div class="column-07 start-18">270px</div>
            </div>


            <div class="container">
                <div class="column-05 start-01">190px</div>
                <div class="column-13 start-06">510px</div>
                <div class="column-06 start-19">230px</div>
            </div>

            <div class="container sample">
                <div class="column-23 start-02">
                    <h4>四分栏</h4>
                </div>
            </div>

            <div class="container">
                <div class="column-05 start-01">190px</div>
                <div class="column-06 start-06">230px</div>
                <div class="column-06 start-12">230px</div>
                <div class="column-07 start-18">270px</div>
            </div>

            <div class="container sample">
                <div class="column-23 start-02">
                    <h4>等分栏</h4>
                </div>
            </div>

            <div class="container">
                <div class="column-08 start-01">310px</div>
                <div class="column-08 start-09">310px</div>
                <div class="column-08 start-17">310px</div>
            </div>

            <div class="container">
                <div class="column-12 start-01">470px</div>
                <div class="column-12 start-13">470px</div>
            </div>

            <div class="container">
                <div class="column-06 start-01">230px</div>
                <div class="column-06 start-07">230px</div>
                <div class="column-06 start-13">230px</div>
                <div class="column-06 start-19">230px</div>
            </div>

            <div class="container sample">
                <div class="column-23 start-02">
                    <h4>各栅格测试</h4>
                </div>
            </div>

            <div class="container">
                <div class="column-01 start-01">01</div>
                <div class="column-01 start-02">02</div>
                <div class="column-01 start-03">03</div>
                <div class="column-01 start-04">04</div>
                <div class="column-01 start-05">05</div>
                <div class="column-01 start-06">06</div>
                <div class="column-01 start-07">07</div>
                <div class="column-01 start-08">08</div>
                <div class="column-01 start-09">09</div>
                <div class="column-01 start-10">10</div>
                <div class="column-01 start-11">11</div>
                <div class="column-01 start-12">12</div>
                <div class="column-01 start-13">13</div>
                <div class="column-01 start-14">14</div>
                <div class="column-01 start-15">15</div>
                <div class="column-01 start-16">16</div>
                <div class="column-01 start-17">17</div>
                <div class="column-01 start-18">18</div>
                <div class="column-01 start-19">19</div>
                <div class="column-01 start-20">22</div>
                <div class="column-01 start-21">21</div>
                <div class="column-01 start-22">22</div>
                <div class="column-01 start-23">23</div>
                <div class="column-01 start-24">24</div>
            </div>

            <div class="container">
                <div class="column-01 start-01">30px</div>
            </div>

            <div class="container">
                <div class="column-02 start-02">70px</div>
            </div>
            <div class="container">
                <div class="column-03 start-03">110px</div>
            </div>

            <div class="container">
                <div class="column-04 start-04">150px</div>
            </div>

            <div class="container">
                <div class="column-05 start-05">190px</div>
            </div>

            <div class="container">
                <div class="column-06 start-06">230px</div>
            </div>

            <div class="container">
                <div class="column-07 start-07">270px</div>
            </div>

            <div class="container">
                <div class="column-08 start-08">310px</div>
            </div>

            <div class="container">
                <div class="column-09 start-09">350px</div>
            </div>

            <div class="container">
                <div class="column-10 start-10">390px</div>
            </div>

            <div class="container">
                <div class="column-11 start-11">430px</div>
            </div>

            <div class="container">
                <div class="column-12 start-12">470px</div>
            </div>

            <div class="container">
                <div class="column-13 start-12">510px</div>
            </div>

            <div class="container">
                <div class="column-14 start-11">550px</div>
            </div>

            <div class="container">
                <div class="column-15 start-10">590px</div>
            </div>

            <div class="container">
                <div class="column-16 start-09">630px</div>
            </div>

            <div class="container">
                <div class="column-17 start-08">670px</div>
            </div>

            <div class="container">
                <div class="column-18 start-07">710px</div>
            </div>

            <div class="container">
                <div class="column-19 start-06">750px</div>
            </div>

            <div class="container">
                <div class="column-20 start-05">790px</div>
            </div>

            <div class="container">
                <div class="column-21 start-04">830px</div>
            </div>

            <div class="container">
                <div class="column-22 start-03">870px</div>
            </div>

            <div class="container">
                <div class="column-23 start-02">910px</div>
            </div>

            <div class="container">
                <div class="column-24 start-01">950px</div>
            </div>
        </div>
    </body>
</html>
